<template>
  <div class="vs-display-list">
    <div class="list-item" v-for="(item, index) in data" :key="index + '-'">
      <div class="list-items">
        <div class="list-items__label">{{ item.label }}</div>
        <div class="list-items__num">
          <span class="list-items__num-ber">{{ item.value }}</span>
          <label class="list-items__num-unit">{{ item.unit }}</label>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "VsDisplayList",
  components: {},
  filters: {},
  props: {},
  data() {
    return {
      data: [
        { label: "宅基地面积", value: 26458, unit: "亩" },
        { label: "房屋面积", value: 57683745, unit: "m²" },
        { label: "户数", value: 28595, unit: "户" },
        { label: "人均宅基地面积", value: 24.36, unit: "m²" }
      ]
    };
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  updated() {},
  activated() {},
  deactivated() {},
  beforeDestroy() {},
  methods: {}
};
</script>

<style lang="less">
.vs-display-list {
  display: flex;
  align-items: center;
  justify-content: space-between;
  .list-item {
    height: 150px;
    width: 180px;
    background-image: url("~@/assets/images/visual-screen/c-dis-list.png");
    background-position: center;
    position: relative;
    .list-items {
      position: absolute;
      top: 78px;
      left: 10px;
      &__label {
        font-family: PingFangSC-Semibold;
        font-size: 16px;
        color: #ffffff;
        letter-spacing: 0;
        text-align: center;
        width: 163px;
        height: 23px;
        line-height: 23px;
      }
      &__num {
        margin-top: 3px;
        text-align: center;
        &-ber {
          font-family: antonio-bold;
          font-size: 30px;
          color: #ffffff;
          letter-spacing: 1px;
          text-align: center;
        }
        &-unit {
          margin-left: 2px;
        }
      }
    }
  }
}
</style>
